صفحات وب

وب يکی از مهمترين  سرويس های اينترنت است . اطلاعات  در  ساختارهای خاصی با نام "صفحات وب " ، سازماندهی می شوند . صفحات وب در ارائه سرويس وب دارای نقشی حياتی می باشند. صفحات وب با استفاده از HTMLايجاد می گردند. HTMLشامل مجموعه ای از تگ های از قبل تعريف شده و ثابت بوده که با استفاده از آنان می توان نحوه نمايش محتويات يک صفحه را برای نمايش دهندگان صفحات وب ( مرورگرها ) مشخص کرد. مرورگرهای وب دارای نرم افزار لازم برای تفسير هر يک از تگ ها و نمايش آنها می باشند. قبل از بررسی HTMLو امکانات مربوطه آن، لازم است در ابتدا با برخی مفاهيم اوليه بيشتر آشنا شويم:

  • صفحه وب .  صفحه وب  يک فايل ساده متنی است که محتويات آن علاوه بر متن، شامل تگ های HTMLنيز می باشد. تگ های فوق ، نحوه نمايش اطلاعات  توسط يک مرورگر را مشخص می نمايند. تگ های HTML، دستورالعمل های ساده ای می باشند  که نحوه نمايش محتويات صفحه را برای مرورگر وب ، تبين می نمايد. مرورگر به منظور اتخاذ تصميم در رابطه با نحوه نمايش اطلاعات ، تگ های HTMLرا تفسير می نمايند.
  • HTML يک " زبان نشانه گذاری " است . زبان فوق نحوه فرمت ( قالب ) يک صفحه را تشريح می نمايد. با استفاده از زبان فوق می توان : نوع ، اندازه و رنگ يک فونت را مشخص نمود . اقدام به ايجاد جداول نمود و يا از فايل های گرافيکی و يا صوتی به همراه صفحات وب استفاده نمود .
  •  مرورگر وب . مرورگر وب ( نظير Internet Explorerو يا NetescapeNavigator) ،  نرم افزاری است که دو کار اصلی را انجام می دهد:
    - مرورگرها با نحوه درخواست يک صفحه وب از سرويس دهنده وب آشنائی دارند. بدين ترتيب برنامه های فوق قادر به درخواست يک صفحه وب از سرويس دهنده وب  و نمايش آن بر روی کامپيوتر سرويس گيرنده می باشند.
    - مرورگرهای وب با نحوه تفسير تگ های HTMLآشنائی دارند. پس از تفسير تگ های HTMLزمينه نمايش اطلاعات موجود در صفحه وب با فرمت مشخص شده ، فراهم می گردد .
  • سرويس دهنده وب . سرويس دهنده وب ، نرم افزاری است که قادر به پاسخگوئی به مرورگر وب و ارسال صفحه درخواستی است . صفحات وب بر اساس يک ساختار مشخص و تحت يک نام واحد ( نام حوزه )  بر روی  سرويس دهنده وب ذخيره می گردند. بر روی يک سرويس دهنده وب امکان استقرار صفحات وب متعدد و با ساختارهای جداگانه وجود دارد.

مشاهده محتويات اوليه يک صفحه وب
به منظور مشاهده کد اوليه (Source) يک صفحه وب، می توان از گزينه "View Source"  استفاده نمود . بدين منظور می توان کليد سمت راست موس را فعال ( زمانيکه صفحه مورد نظر توسط مرورگر نمايش داده شده است ) و گزينه "View Source" را انتخاب کرد. در ادامه پنجره ای فعال و کلمات و کاراکترهای مربوطه نمايش داده می شود. کلمات و کاراکترهای فوق ، کدهای برنامه نويسی Htmlمی باشند. هر عنصر(Element) بهمراه کد مربوط ، يک تگ Htmlمی باشد.
تگ HTML
يک تگ Html، کدی است که به مرورگر اعلام می نمايد با متن مورد نظر چه رفتاری را می بايست داشته باشد. هر تگ بصورت حروف و يا کلماتی که بين علامت < و >  می باشند ، نشان داده می شود ( مثلا" <Body> ). برای اعلام خاتمه عمليات مورد نظر در رابطه با يک تگ خاص به مروگر، از  "/"  بهمراه تگ مربوطه استفاده می شود ( مثلا" <Body/> ) . اکثر تگ ها بصورت زوج ( شروع و پايان) استفاده می گردند. برخی از تگ ها تابع قانون فوق نمی باشند.
هر صفحه وب دارای تگ های زير در ابتدای صفحه است :

  • <HTML> . ابتدای يک صفحه وب را مشخص می نمايد.
  • <HEAD> . هدر صفحه وب را مشخص می نمايد
  • <TITLE> . عنوان در نظر گرفته شده برای صفحه وب را مشخص می نمايد.
  • <BODY> . ابتدای محتويات صفحه وب را مشخص می نمايد.

تگ های زير می بايست در انتهای صفحه بسته گردند.

  • <HTML> . ابتدای يک صفحه وب را مشخص می نمايد.
  • <BODY> . ابتدای محتويات صفحه وب را مشخص می نمايد.

ايجاد يک صفحه وب
برای ايجاد صفحات وب از روش های متعددی استفاده می گردد.صدها شرکت در اين زمينه ابزارهائی را بدين منظور طراحی و عرضه نموده اند. در مقطع فعلی هدف صرفا" آشنائی با اصول اوليه صفحات وب می باشد ، بنابراين می توان از ابزارهای ساده ای نظير اديتورهای ساده متنی استفاده کرد. با توجه به نوع سيستم عامل نصب شده بر روی کامپيوتر می توان از گزينه های متفاوتی در اين زمينه استفاده کرد. مثلا" کاربران ويندوز می توانند از نرم افزار Notepadکه يک اديتور ساده متنی است ، استفاده نمايند. اديتور را فعال و تگ های Htmlزير را در آن تايپ نمائيد :


<html>
<head>
<title> اولين صفحه وب</title>
</head>
<body>
اين اولين صفحه وبی است کهنوشته میگردد
</body>
</html>

پس از تايپ تگ های فوق ، فايل را با نام دلخواه و انشعاب htmlو يا htmذخيره نمائيد. در ادامه مرورگر موجود بر روی کامپيوتر خود را فعال و فايل فوق را با استفاده از آن فعال (open) نمائيد. صفحه وب در مرورگر بصورت زير نمايش داده می شود.

در ادامه  برخی از تگ های متداول  Htmlتوضيح داده می شود.
 ● تگ های Bold,Italic,Underline
برای پررنگ نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <B> و <B/>  قرار داد.


خروجی

تگ Html

اين قسمت پر رنگ است

اين قسمت <B> پر رنگ <B/> است.

برای ايتاليک نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <I> و <I/>  قرار داد. 


خروجی

تگ Html

اين قسمت ايتاليک است

اين قسمت <I> ايتاليک <I/> است.

برای زيرخط داشتن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <U> و <U/>  قرار داد. 


خروجی

تگ Html

اين قسمت زيرخط دارد

اين قسمت <U> زيرخط <U/> دارد

 ● تگ های پاراگراف و خط فاصله 
با استفاده از <BR> می توان بين خطوط فاصله ( خط خالی )  ايجاد کرد.


خروجی

تگ Html

اين قسمت
خط دوم نمايش داده می شود

اين قسمت <BR> خط دوم نمايش داده می شود

تگ <P>  ، باعث ايجاد يک پاراگراف می گردد. در اين حالت بين خطوط ، فواصل بيشتری بوجود می آيد. 


خروجی

تگ Html

اين قسمت
خط دوم نمايش داده می شود

اين قسمت <P> خط دوم نمايش داده می شود

تگ <hr> باعث ايجاد يک خط افقی می شود.


خروجی

تگ Html

اين يک خط افقی است.

اين يک خط افقی است. <hr>

● تگ های نوع ، اندازه و رنگ فونت
به منظور تغيير رنگ متن دلخواه از تگ <Fontcolor="color"> ... </Font> استفاده می شود.


خروجی

تگ Html

اين قسمت آبی است

اين قسمت <" Fontcolor="Blue> آبی<Font/> است

برای تعيين رنگ می توان از کد معادل آن ( بصورت مبنای شانزده ) نيز استفاده کرد :


<font color= "#FDFD00">

در صورتيکه قصد اختصاص  يک رنگ برای تمام نوشته های موجود در يک صفحه وب را داشته باشيد ، می توان در بخش <Body> از text=colorبصورت زير استفاده کرد.


<Body text="blue" >

برای تغيير نوع فونت از تگ <font face="fonttype"> ...</font>  استفاده می گردد.


خروجی

تگ Html

اين قسمت با فونت تيتر نوشته شده است

اين قسمت با <" Font face="Titr> فونت تيتر<Font/> نوشته شده است

برای تغيير اندازه فونت از تگ <font size="value"> ...</font>  استفاده می گردد.  اندازه فوتت پيش فرض سه است . در صورت تمايل می توان در بخش valueاز مقاديری بصورت 2 + ( افزايش به اندازه دو ) و يا 2 - ( کاهش به اندازه دو ) نيز استفاده کرد.


خروجی

تگ Html

اين قسمت با اندازه فونت نوشته شده است

اين قسمت با <" Font size="4> اندازه فونت<Font/> نوشته شده است

اين قسمت با اندازه فونت نوشته شده است

اين قسمت با < Font size=+2> اندازه فونت<Font/> نوشته شده است

اين قسمت با اندازه فونت نوشته شده است

اين قسمت با <Font size= -2> اندازه فونت<Font/> نوشته شده است

برای تغييراندازه يک فونت می توان از تگ های <small> و يا <big> نيز استفاده کرد.


خروجی

تگ Html

اين قسمت کوچک است

اين قسمت <small> کوچک <small/> است.

اين قسمت بزرگ است

اين قسمت <big> بزرگ <big/> است.

 با استفاده از تگ های هدينگ ، نيز می توان اندازه يک فونت را تغيير داد. ( متن مورد نظر بصورت پررنگ نيز نوشته می شود)


خروجی

تگ Html

اين عنوان يک است

  <H1>اين عنوان يک است<H1/>

اين عنوان دو است

<H2>اين عنوان دو است<H2/>

اين عنوان سه است

<H3>اين عنوان سه است<H3/>

● تغيير رنگ زمينه يک صفحه 
برای تغيير رنگ زمينه يک صفحه  بهمراه تگ <Body> از bgcolo=colorاستفاده می شود.


خروجی

تگ Html

 

<body bgcolor="Red">

●ايجاد ليست
سه نوع ليست وجود دارد : Unordered ,Ordered,Descriptive  در ادامه به نحوه استفاده از هر يک اشاره می گردد.
- يک ليست Unordered بصورت زير است :


Unordered list
  • مورد يک
  • مورد دوم
  • مورد سوم

برای ايجاد يک ليست unordered، از تگ <ul>  و برای مشخص نمودن هر آيتم ليست از تگ <li> استفاده می شود. نوع bullet( قبل  هر آيتم قرار می گيرد) می تواند  Circle  , square  , discباشد . به منظور تغيير نوع  bulletمی توان بهمراه تگ <ul> از typeاستفاده کرد.


خروجی

تگ Html
  • مورد يک
  • مورد دوم
  • مورد سوم

 

<UL>
<li> مورد يک
<li> مورد دوم
<li> مورد سوم
</UL>

- يک ليست ordered بصورت زير است :


Ordered list
  1. مورد يک
  2. مورد دوم
  3. مورد سوم

برای ايجاد يک ليست ordered، از تگ <ol>  و برای مشخص نمودن هر آيتم ليست از تگ <li> استفاده می شود.


خروجی

تگ Html
  1. مورد يک
  2. مورد دوم
  3. مورد سوم

 

<OL>
<li> مورد يک
<li> مورد دوم
<li> مورد سوم
</OL>

 نحوه  مرتب سازی ليست ( قبل هر هر آيتم قرار می گيرد) می تواند  تغيير داده شود . به منظور تغيير نوع ليست  می توان بهمراه تگ <ol> از typeاستفاده کرد.  در اين حالت می توان از "A" به منظور مرتب سازی ليست بر اساس حروف بزرگ ، از حرف "a" برای مرتب سازی ليست  بر اساس حروف کوچک ، از حرف "I" برای مرتب سازی ليست بر اساس حروف بزرگ رومی و از حرف "i" برای مرتب سازی ليست بر اساس حروف رومی کوچک استفاده کرد. مثلا" دستور زير باعث نمايش ليست با استفاده  از حروف رومی می گردد:


<OL type="I" >

يک ليست  Descriptive، ليستی از آيتم ها را ايجاد که در سطر دوم متن مورد نظر دارای  تورفتگی است.


Descriptive list

مورد يک
مورد مربوط به يک
مورد دوم

از تگ <dl> برای تعريف ليست استفاده می شود. تگ <dt> برای سطرهای معمولی و از تگ <dd> برای سطرهائی شامل تورفتگی  استفاده می شود.


خروجی

تگ Html

مورد يک
مورد مربوط به يک
مورد دوم

<DL>
<dt> مورد يک
<dd>مورد مربوط به يک
<dt> مورد دوم
</DL>

 ● لينک به ساير سايت ها  و صفحات
يکی از ويژگی های جالب صفحات وب ، امکان ايجاد لينک ( پيوند ) به ساير صفحات و سايت ها است . بدين منظور از تگ <a> بهمراه hrefکه آدرس مورد نظر را مشخص می کند در ابتدای عنوان مورد نظر استفاده شده و در انتهای عنوان نيز از تگ </a> استفاده می شود.
<a  href = "http://www.srco.ir"> برای ورود به سايت دراين محل کليک نمائيد</a>
● پنجره جديد 
در صورتيکه قصد داشته باشيم ، کاربران سايت پس از اينکه بر روی يک لينک ، کليک می نمايند ، صفحه حاوی لينک را کماکن در اختيار داشته باشند ، می توان از تگ <target=_Blank> همراه  تگ <a> استفاده کرد. در چنين حالتی ، پس از اينکه کاربران بر روی لينک مورد نظر ، کليک نمودند ، يک پنجره خالی حديد فعال و محتويات سايت و يا صفحه لينک شده در آن نمايش داده خواهد .
<a  href = "http://www.srco.ir"  target="_Blank" > برای ورود به سايت در اين محل کليکنمائيد</a>
● رنگ لينک ها
رنگ آبی بعنوان رنگ پيش فرض برای لينک ها در نظر گرفته شده است . به منظور تغيير رنگ لينک ( قبل از مشاهده صفحه لينک شده ) و رنگ لينک ملاقات شده ( مشاهده شده ) می توان از تگ های <link> و <vlink> استفاده کرد . مثال زير نحوه عمليات فوق را نشان می دهد:


<body link = "Red"  vlink = "gray" >

●  لينک دريافت نامه الکترونيکی
در صورتيکه بخواهيم بر روی صفحه  يک لينک به منظور دريافت E-mailداشته باشيم ، بهمراه  تگ <a>  ، آدرس E-mailمربوطه را نيز مشخص نمود.
<a  href = "mailto:Info@Srco.ir"> برای ارسال نامهالکترونيکی  در اين محل کليک نمائيد</a>
●  اضافه کردن تصوير و گرافيک
برای اضافه نمودن تصوير در يک صفحه وب از تگ زير استفاده می شود.


<img  src= " نام فايل گرافيکی مورد نظر " >

● تراز متن
متن و تصاوير استفاده شده در يک صفحه وب ، بصورت پيش فرض " تراز از سمت چپ " می گردند. در صورتيکه بخواهيم بخش های خاص از صفحه در وسط قرار بگيرد ، از تگ <center> در ابتدای بخش  مورد نظر و از تگ <center/> در انتهای بخش ،  استفاده می شود.
●  ايجاد جدول
 برای ايجاد جدول از تگ <table> ، سطر از تگ <tr> ،هر بخش داده از <td> استفاده می شود. فرض کنيد ،قصد ايجاد يک جدول مشابه شکل زير را داشته باشيم :


A1

A2

B1

B2

C1

C2

جدول فوق دارای سه سطر و دو ستون است . برای ايجاد جدول فوق از تگ های زير استفاده می شود:


<table>

  شروع جدول

<tr>

  شروع سطر اول

<td>

 شروع اولين سلول سطر اول (A1)

</td>

 پايان اولين سلول (A1)

<td>

 شروع دومين سلول (A2)

</td>

 پايان دومين  سلول (A2)

</tr>

 پايان سطر اول

<tr>

 شروع سطر دوم

<td>

 شروع اولين سلول سطر دوم (B1)

</td>

 پايان دومين  سلول (B1)

<td>

 شروع دومين سلول (B2)

</td>

 پايان دومين  سلول (B2)

</tr>

 پايان سطر دوم

<tr>

 شروع سطر سوم

<td>

 شروع اولين سلول سطر سوم (C1)

</td>

 پايان اولين سلول (C1)

<td>

 شروع دومين سلول (C2)

</td>

 پايان دومين سلول (C2)

</tr>

 پايان سطر سوم

</table>

 پايان  جدول

 برای تعريف رنگ زمينه برای هر سطر و يا سلول می توان بهمراه تگ های <tr> و يا <td> از bgcolor="Colorاستفاده کرد.


<tr bgcolor = "red" >

برای تعريف اندازه طول و عرض يک جدول ، در زمان تعريف جدول می توان از widthو heightبه منظور مشخص نمودن اندازه جدول (  بر حسب پيکسل و يا درصد ) استفاده کرد.


<table width=250  height=300 >

برای مشخص نمودن طول و عرض هر سطر و يا سلول نيز می توان از widthو يا heightاستفاده کرد.
Cellpading، تگ فوق فضای خالی بين هر يک از گوشه های سلول با داده های موجود در سلول را مشخص می نمايد.


<table borde = 1 cellpadding = 3 >

Cellspacing ، تگ فوق تعداد فضای خالی ( بر حسب پيکسل ) بين هر يک سلول ها را مشخص می نمايد.


<table borde = 1 cellspacing =13 >

Alignment ، تمام سلول ها ی موجود در يک جدول بصورت پيش فرض "تراز از چپ " می گردند. برای تراز يک سلول می توان هر يک از تگ های <td> ، <tr>  را بهمراه align = directionاستفاده کرد.


<td align = "Right" >